import { CheckOutlined, EditOutlined } from '@ant-design/icons';
import { StyledCommandBar } from '../style';

export default (props: any) => {
  const editIcon = (
    <EditOutlined
      style={{
        fontSize: 16,
        color: '#8d8d8d',
      }}
    />
  );
  const finishedIcon = (
    <CheckOutlined
      style={{
        fontSize: 16,
        color: '#52c41a',
      }}
    />
  );

  return (
    <StyledCommandBar
      className={
        props.isSuccessed
          ? 'command-wrapper command-success'
          : 'command-wrapper'
      }
      onClick={props.onClick}
    >
      <div className='command'>{props.item.command}</div>
      <div className='icon'>{props.isSuccessed ? finishedIcon : editIcon}</div>
    </StyledCommandBar>
  );
};
